<template>
  <div class="Base">
    <p>
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link :to="{ name: 'home' }">首页</router-link>
      |
      <router-link :to="{ name: 'bmi' }">Go to BMI</router-link>
      |
      <router-link :to="{ name: 'meizi' }">Go to 妹纸</router-link>
    </p>
    <ul>
      <li>
<!--        <router-link to="/user/zhangsan">user: zhangsan</router-link>-->
        <router-link :to="{
          name: 'user',
          params: {
            uname: 'zhangsan'
          }
        }">user: zhangsan</router-link>
      </li>
      <li>
        <router-link :to="{
          name: 'user',
          params: {
            uname: 'lisi'
          }
        }">user: lisi</router-link>
      </li>
      <li>
        <router-link :to="{
          name: 'user',
          params: {
            uname: 'wangwu'
          }
        }">user: wangwu</router-link>
      </li>
    </ul>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Base",
  created() {
    // $router 路由实例
    // console.log(this.$router)
    // 当前页面的路由信息
    // console.log(this.$route)
  },
  methods: {
    toHome() {
      this.$router.push('/')
    },
    toBMI() {
      this.$router.push({
        path: '/bmi'
      })
    },
    toMEIZI() {
      this.$router.push({
        name: 'meizi'
      })
    }
  }
}
</script>

<style scoped>

</style>
